<script src="../../common/utils.js"></script>
<template>
    <div>
        <div class="login-box">
            <div class="login-box-title">
                <p>{{'管理中心'}}</p>

                <div class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label form-item-label">
                            <i class="layui-icon layui-icon-username"></i>
                        </label>
                        <div class="layui-input-block">
                            <input type="text" v-model="form.phone"
                                   placeholder="请输入登陆手机号" autocomplete="off" class="layui-input" maxlength="11">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label form-item-label">
                            <i class="layui-icon layui-icon-password"></i>
                        </label>
                        <div class="layui-input-block">
                            <input type="password" v-model="form.password" placeholder="请输入密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label form-item-label">
                            <i class="layui-icon layui-icon-vercode"></i>
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" v-model="form.vercode" placeholder="验证码"
                                   autocomplete="off" class="layui-input" style="width: 89px" maxlength="4">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <img src="../../assets/images/login/0729231414.png" height="37" width="99"/></div>
                    </div>

                    <label class="layui-form-label labelp" :class="{bgcolor:validationFag}">{{msg}}</label>

                    <div class="layui-form-item">
                        <button class="layui-btn" @click="onsubmit" :disabled="disabled">{{'登&emsp;陆'}}</button>
                    </div>


                </div>


            </div>
        </div>


        <div class="layui-carousel" id="bannerBox">
            <div carousel-item>
                <img src="../../assets/images/login/banner_1.jpg">
                <img src="../../assets/images/login/banner_2.jpg">
            </div>
        </div>

    </div>
</template>

<script>
    import formValidation from  "@/common/formValidation";
    import {checkForm} from  "@/common/formValidation";

    export default {
        data() {
            return {
                validationFag : false,
                msg: "欢迎您!",
                form:{
                    phone:"17788889999",//手机号 17788889999总管理员,17799990000 次总管理员
                    password:"123",//密码
                    vercode:"42",//验证码
                },
                disabled:false,

            }
        },
        created() {
        },
        mounted() {
            layui.carousel.render({
                elem: '#bannerBox',
                arrow: 'none', //始终显示箭头
                anim: 'fade', //切换动画方式
                full: true,
                indicator: 'outside',
                interval: 3000
            })

        },
        methods:{
            //点击提交的时候,所进行的验证
            onsubmit(){
                // alert("Fn onsubmit")
                this.disabled=true;

                let checkFag=checkForm(this.form,formValidation.loginValidation)

                if(!checkFag){
                    this.validationFag=false;
                    this.msg="欢迎您!"
                    let data=this.form;

                    this.httpRequest.getLogin(data)
                        .then(res=>{
                            this.disabled=false;
                            console.log(res,123)
                            this.$router.push({name:'welcome'})
                            this.$router.push({name:'addStudents'})
                        })
                        .catch(err=>{
                            this.disabled=false;
                            console.log(err,321)
                        })





                }else {
                    this.validationFag=true;
                    this.msg=checkFag
                }
                this.disabled=false;
            },

        },


    }
</script>

<style>
    .labelp{
        width: 100%;
        text-align: left;
        padding-left: 30px !important;
    }
    .bgcolor{
        color: yellow;
    }
    .layui-icon {
        font-size: 30px;
        color: #fff;
    }

    .layui-form-label {
        padding: 9px 5px;
    }

    .layui-input {
        background-color: #cccccc;
        border-radius: 5px;
        font-size: 1rem;
    }

    .layui-form-mid {
        padding: 0 !important;
    }

    .layui-btn {
        width: 250px;
        height: 55px;
        margin-left: 50%;
        transform: translateX(-48%);
        background-color: transparent;
        background-image: url("../../assets/images/login/subbag.png");
        background-repeat: no-repeat;
        font-size: 18px;
        letter-spacing: 1px;

    }
</style>


<style lang="scss" scoped>
    .login-box {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999999;
        .login-box-title {
            position: absolute;
            right: 20%;
            top: 20%;
            width: 310px;
            height: 330px;
            border: 2px solid #6dcfec;
            border-radius: 10px;
            padding: 20px;
            background-color: transparent;
            padding-bottom: 30px;
            &:first-child p {
                text-align: center;
                padding: 0 15px 15px;
                margin-bottom: 15px;
                font-size: 1.5rem;
                color: #FFF;
                border-bottom: 1px solid #c6c6c6;
                width: 90%;
            }
        }
        .form-item-label {
            text-align: center;
            padding: auto 5px !important;
        }
        .layui-input-block {
            right: 30px;
        }
        .layui-input-inline {
            right: 10px;
            width: 82px;
        }

    }
</style>
